<template>
    <!-- 首页 -->
    <div class="w">
        <div class="header">
            <div class="header_left">
                1322
            </div>
            <div class="header_cont">
                <div class="header_cont_top">
                    <el-carousel height="345px" indicator-position="none">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <h3 class="small justify-center" text="2xl">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="header_cont_bottom">
                    <div class="header_cont_bottom_box">132</div>
                    <div class="header_cont_bottom_box">123</div>
                    <div class="header_cont_bottom_box">123</div>
                </div>
            </div>
            <div class="header_west">
                <div class="header_west_top">
                    <el-avatar :size="60" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                    <div class="header_west_name">
                        <div style="margin-bottom: 10px;">Hi，早上好</div>
                        <div>1233213213</div>
                    </div>
                </div>
                <div class="header_west_const">
                    <div class="homepage">我的主页</div>
                    <div class="theatrical">后台管理</div>
                </div>
                <div class="categorize">
                    <div class="categorizeBox">
                        <img src="@/assets/img/header/caigou.png" alt="">
                        <div>采购信息</div>
                    </div>
                    <div class="categorizeBox">
                        <img src="@/assets/img/header/shangpin.png" alt="">
                        <div>商品信息</div>
                    </div>
                    <div class="categorizeBox">
                        <img src="@/assets/img/header/pinpai.png" alt="">
                        <div>品牌专区</div>
                    </div>
                    <div class="categorizeBox">
                        <img src="@/assets/img/header/quanyi.png" alt="">
                        <div>会员权益</div>
                    </div>
                    <div class="categorizeBox">
                        <img src="@/assets/img/header/gonggao.png" alt="">
                        <div>公告标讯</div>
                    </div>
                    <div class="categorizeBox">
                        <img src="@/assets/img/header/guanyu.png" alt="">
                        <div>关于我们</div>
                    </div>

                </div>
                <div class="bulletin">
                    <div class="bulletin_top"><span class="bulletins">公告</span> <span>客服中心</span></div>
                    <div>
                        <div class="bulletin_box">12333333333333333333333399999999999999999999933</div>
                        <div class="bulletin_box">12333333333333333333333333</div>
                        <div class="bulletin_box">12333333333333333333333333</div>
                        <div class="bulletin_box">12333333333333333333333333</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="purchases">
        <div class="w purchases_box">
            <div class="purchases_left">
                <div class="purchases_top">
                    <div class="jiaotou"></div>
                    <div class="latest_more">昨日新增采购量 <span class="latest_cont"> 88888 </span><span
                            class="mr10">条</span><span>更多>></span></div>
                </div>
                <div class="purchases_botm">
                    <el-carousel height="276px" loop autoplay indicator-position="none">
                        <el-carousel-item>
                            <div class="carousel_zong">
                                <div class="carousel_tem">
                                    <div class="carousel_tem_1">采购燃气灶维修</div>
                                    <div class="carousel_tem_2">采购总量：1(台)</div>
                                    <div class="carousel_tem_3">
                                        <div>价格：<span class="bargain">面议</span></div>
                                        <div class="particulars">查看详情</div>
                                    </div>
                                    <div class="carousel_tem_4">
                                        <div>2023-12-12</div>
                                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="purchases_right">
                <div class="purchases_right_top">
                    <h3>无需注册<span class="red">免费</span>发布采购</h3>
                    <div class="quote">坐等优质供应商报价</div>
                    <div class="redButon">免费发布采购信息</div>
                </div>
                <div class="purchases_right_btn">1223</div>
            </div>
        </div>

    </div>
    <div class="alathe">
        <div class="w alathes">
            <div class="alathe_left">
                <img width="160px" src="@/assets/img/header/shukjc.png" alt="">
                <h3>数控机床</h3>
                <div class="alathe_detail">自动化、精准、高效</div>
                <div class="alathe_minute">查看详情</div>
            </div>
            <div class="alathe_cent">
                <div class="alathe_cent_top">
                    <h3>1F 机床/机械及行业设备</h3>
                    <div>更多>></div>
                </div>
                <div class="alathe_cent_box">
                    <div class="alathe_box_top">
                        <img style="margin-right: 5px;" width="14px" src="@/assets/img/header/hot.png" alt="">
                        <h4>推荐商品/</h4>
                        <span style="color: #555;">品牌放心购 正品好价</span>
                    </div>
                    <div class="alathe_box_bnt">
                        <div class="alathe_element">
                            <img width="170px" src="@/assets/img/header/ti.png" alt="">
                            <div class="alathe_element_size">C6140-1500普通车床 通孔直径82 电动四工位刀架</div>
                            <div class="alathe_element_detail">查看详情 >></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="alathe_right">
                <div class="alathe_right_top">
                    <h3>品牌专区</h3>
                    <div>更多>></div>
                </div>
                <div>
                    <div class="alathe_right_box">
                        <img width="50px" src="@/assets/img/header/cz.png" alt="">
                        <div class="alathe_Box">
                            <h3 class="alathe_Box_h3">沧州兴吉管道有限公12313132</h3>
                            <div class="alathe_Box_dic">主营产品：拖链、弯头…</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="alathe drill">
        <div class="w alathes">
            <div class="alathe_drill">
                <img width="160px" src="@/assets/img/header/shukjc.png" alt="">
                <h3>数控机床</h3>
                <div class="alathe_detail">自动化、精准、高效</div>
                <div class="alathe_minute">查看详情</div>
            </div>
            <div class="alathe_cent">
                <div class="alathe_drill_top">
                    <h3>2F 电钻</h3>
                    <div>更多>></div>
                </div>
                <div class="alathe_cent_box">
                    <div class="alathe_box_top">
                        <img style="margin-right: 5px;" width="14px" src="@/assets/img/header/hot.png" alt="">
                        <h4>推荐商品/</h4>
                        <span style="color: #555;">品牌放心购 正品好价</span>
                    </div>
                    <div class="alathe_box_bnt">
                        <div class="alathe_element">
                            <img width="170px" src="@/assets/img/header/ti.png" alt="">
                            <div class="alathe_element_size">C6140-1500普通车床 通孔直径82 电动四工位刀架</div>
                            <div class="alathe_element_detail">查看详情 >></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="alathe_rights">
                <div class="alathe_right_top">
                    <h3>品牌专区</h3>
                    <div>更多>></div>
                </div>
                <div>
                    <div class="alathe_right_box">
                        <img width="50px" src="@/assets/img/header/cz.png" alt="">
                        <div class="alathe_Box">
                            <h3 class="alathe_Box_h3">沧州兴吉管道有限公12313132</h3>
                            <div class="alathe_Box_dic">主营产品：拖链、弯头…</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup></script>
<style lang="scss" scoped>

.w {
    width: 75vw;
    margin: 0 auto;
}

.red {
    color: red;
}

.bargain {
    color: red;
    font-weight: 700;
}

.mr10 {
    margin-right: 10px;
}

.header {
    display: flex;
    height: 33.125vw;

    .header_left {
        width: 15vw;
    }

    .header_cont {
        width: 46.875vw;

        .header_cont_top {
            height: 22.5vw;
            background-color: aqua;
        }

        .header_cont_bottom {
            display: flex;
            margin-top: 5px;

            .header_cont_bottom_box {
                width: 15.1875vw;
                height: 9.6875vw;
                background-color: #E8E8E8;
                margin-right: 0.375vw;
            }
        }
    }

    .header_west {
        width: 15vw;
        padding: 1.25vw 1.25vw 0;

        .header_west_top {
            display: flex;
            align-items: center;

            .header_west_name {
                margin-left: 0.625vw;
                font-size: 14px;
            }
        }

        .header_west_const {
            display: flex;
            width: 11.5625vw;
            height: 2.125vw;
            margin-top: 1.25vw;
            margin-bottom: 1.875vw;
            font-size: 14px;
            text-align: center;
            line-height: 2.125vw;

            .homepage {
                border: 1px solid #2270D7;
                width: 5.75vw;
                height: 100%;
                border-right: 1px solid #2270D7;
                color: #E8E8E8;
                background-color: #2270D7;
                border-radius: 0.625vw 0 0 0.625vw;
            }

            .theatrical {
                width: 5.75vw;
                height: 100%;
                border: 1px solid #2270D7;
                border-radius: 0 0.625vw 0.625vw 0;
            }
        }

        .categorize {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 1.5vw;
            border-bottom: 1px solid #E8E8E8;

            .categorizeBox {
                height: 5vw;
                margin-right: 9px;
                margin-bottom: 1.25vw;
                font-size: 12px;
                text-align: center;

                &:nth-child(3n) {
                    margin-right: 0;
                }
            }

        }

        .bulletin {
            .bulletin_top {
                font-size: 14px;

                .bulletins {
                    padding: 0 10px 4px;
                    margin-right: 15px;
                    border-bottom: 3px solid #2270D7;
                }
            }

            .bulletin_box {
                width: 12vw;
                padding-top: 10px;
                font-size: 12px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}


.purchases {
    height: 22.4375vw;
    background: url('@/assets/img/header/S_bjc.png') no-repeat;
    background-size: 120vw 21.875vw;

    .purchases_box {
        display: flex;
        justify-content: space-between;
        // align-items: center;
        padding: 10px 0;

        .purchases_left {
            width: 60.9375vw;
            height: 23.125vw;
            margin-right: 1px;

            .purchases_top {
                display: flex;
                justify-content: space-between;
                height: 2.75vw;
                background-color: #FFFFFF;

                .jiaotou {
                    width: 6.875vw;
                    height: 2.375vw;
                    background: url('@/assets/img/header/jiaotou.png') no-repeat;
                    background-size: 6.875vw 2.375vw;
                }

                .latest_more {
                    align-self: center;
                    font-size: 14px;
                    color: #333;

                    .latest_cont {
                        font-weight: 700;
                        color: #D72A07;
                    }
                }

            }

            .purchases_botm {
                width: 60.9375vw;
                height: 17.875vw;

                .carousel_zong {
                    display: flex;
                    flex-wrap: wrap;
                    padding: 10px;

                    .carousel_tem {
                        width: 14.4375vw;
                        height: 8vw;
                        background-color: #FFFFFF;
                        padding: 15px 15px 0;
                        border-radius: 5px;

                        &:nth-child(-n + 3) {
                            margin-right: 9px;
                            margin-bottom: 10px;

                        }

                        &:nth-child(4n) {
                            margin-right: 0px;

                        }

                        &:nth-child(n+5) {
                            margin-right: 9px;
                        }

                        &:last-child {
                            margin-right: 0px;
                        }

                        .carousel_tem_1 {
                            margin-bottom: 10px;
                            font-style: 14px;
                            font-weight: 700;
                            color: #333;
                        }

                        .carousel_tem_2 {
                            margin-bottom: 10px;
                            font-size: 12px;
                        }

                        .carousel_tem_3 {
                            display: flex;
                            justify-content: space-between;
                            font-size: 12px;
                            margin-bottom: 10px;

                            .particulars {
                                width: 3.75vw;
                                height: 1.5vw;
                                background-color: #2270D7;
                                border-radius: 5px;
                                text-align: center;
                                line-height: 1.5vw;
                                color: #FFFFFF;
                            }
                        }

                        .carousel_tem_4 {
                            display: flex;
                            justify-content: space-between;
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        .purchases_right {
            // width: 14.0625vw;

            .purchases_right_top {
                width: 14.0625vw;
                height: 7.5vw;
                padding-top: 0.9375vw;
                background-color: #FFFFFF;
                text-align: center;

                .quote {
                    margin-top: 10px;
                    margin-bottom: 15px;
                    font-size: 14px;
                    color: #333;

                }

                .redButon {
                    width: 12.5vw;
                    height: 1.875vw;
                    margin: 0 auto;
                    background-color: #D72A07;
                    border-radius: 5px;
                    line-height: 1.875vw;
                    font-size: 14px;
                    color: #FFFFFF;
                }
            }

            .purchases_right_btn {
                width: 14.0625vw;
                height: 13.125vw;
                background-color: #2270D7;
            }
        }
    }
}

.alathe {
    height: 32.5vw;
    padding: 10px 0;
    display: flex;

    .alathes {
        display: flex;

        .alathe_left {
            width: 10.5vw;
            height: 31.25vw;
            background-color: #EEEEEE;
            padding: 20px 20px 0;

            .alathe_detail {
                margin: 10px 0;
                font-size: 14px;
                font-weight: 600;
                color: #333;
            }

            .alathe_minute {
                width: 3.75vw;
                height: 1.5vw;
                background-color: #2270D7;
                border-radius: 5px;
                font-size: 12px;
                text-align: center;
                line-height: 1.5vw;
                color: #FFFFFF;
            }
        }

        .alathe_cent {
            .alathe_cent_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 48.4375vw;
                height: 2.75vw;
                background-color: #EEEEEE;
            }

            .alathe_cent_box {
                margin: 18px 0 0 20px;

                .alathe_box_top {
                    display: flex;
                }
            }

            .alathe_box_bnt {
                display: flex;
                flex-wrap: wrap;
                width: 46.4375vw;

                .alathe_element {
                    width: 10.625vw;
                    margin: 15px 20px 0 0;

                    .alathe_element_size {
                        font-size: 13px;
                        color: #555;
                        text-align: center;
                        margin: 10px 0;
                    }

                    .alathe_element_detail {
                        text-align: center;
                        font-weight: 700;
                        font-size: 14px;
                        color: #D90424;
                    }
                }
            }
        }

        .alathe_right {
            border-left: 1px solid #EEEEEE;

            .alathe_right_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 12.0625vw;
                height: 2.75vw;
                padding-left: 15px;
                padding-right: 10px;
                background-color: #EEEEEE;
            }

            .alathe_right_box {
                display: flex;
                align-items: center;
                margin-top: 20px;
                margin-left: 15px;

                .alathe_Box {

                    margin-left: 5px;

                    .alathe_Box_h3 {
                        width: 8.75vw;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 14px;
                        color: #555;
                    }

                    .alathe_Box_dic {
                        width: 8.75vw;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 12px;
                    }
                }
            }
        }
    }

}

.drill{
    background-color: #F6F6F6;
}

.alathe {
    height: 32.5vw;
    padding: 10px 0;
    display: flex;

    .alathes {
        display: flex;

        .alathe_drill {
            width: 10.5vw;
            height: 31.25vw;
            background-color: #FFFFFF;
            padding: 20px 20px 0;

            .alathe_detail {
                margin: 10px 0;
                font-size: 14px;
                font-weight: 600;
                color: #333;
            }

            .alathe_minute {
                width: 3.75vw;
                height: 1.5vw;
                background-color: #2270D7;
                border-radius: 5px;
                font-size: 12px;
                text-align: center;
                line-height: 1.5vw;
                color: #FFFFFF;
            }
        }

        .alathe_cent {
            .alathe_drill_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 48.4375vw;
                height: 2.75vw;
                background-color: #FFFFFF;
            }

            .alathe_cent_box {
                margin: 18px 0 0 20px;

                .alathe_box_top {
                    display: flex;
                }
            }

            .alathe_box_bnt {
                display: flex;
                flex-wrap: wrap;
                width: 46.4375vw;

                .alathe_element {
                    width: 10.625vw;
                    margin: 15px 20px 0 0;

                    .alathe_element_size {
                        font-size: 13px;
                        color: #555;
                        text-align: center;
                        margin: 10px 0;
                    }

                    .alathe_element_detail {
                        text-align: center;
                        font-weight: 700;
                        font-size: 14px;
                        color: #D90424;
                    }
                }
            }
        }

        .alathe_rights {
            border-left: 1px solid #EEEEEE;
            background-color: #fff;
            .alathe_right_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 12.0625vw;
                height: 2.75vw;
                padding-left: 15px;
                padding-right: 10px;
                background-color: #fff;
                border-bottom: 1px solid #F6F6F6;
            }

            .alathe_right_box {
                display: flex;
                align-items: center;
                margin-top: 20px;
                margin-left: 15px;

                .alathe_Box {

                    margin-left: 5px;

                    .alathe_Box_h3 {
                        width: 8.75vw;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 14px;
                        color: #555;
                    }

                    .alathe_Box_dic {
                        width: 8.75vw;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 12px;
                    }
                }
            }
        }
    }

}
</style>